<template>
  <el-drawer
    :title="queryData.id? '编辑活动':'新增活动'"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="50%"
    :wrapper-closable="false"
  >
    <el-divider />
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form
        ref="form"
        label-position="top"
        :model="queryData"
        :rules="rules"
      >
        <el-row type="flex">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="queryData.username"
              placeholder="请输入"
              style="width: 350px"
              size="small"
              :clearable="true"
            />
          </el-form-item>
          <el-form-item
            label="昵称"
            style="width: 350px; margin-left: 30px"
            prop="nickname"
          >
            <el-input
              v-model="queryData.nickname"
              autocomplete="off"
              size="small"
              placeholder="请输入"
              :clearable="true"
            />
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="密码" :prop="passwordRules">
            <el-input
              v-model="queryData.password"
              placeholder="请输入"
              style="width: 350px"
              size="small"
              name="password"
              :clearable="true"
            />
          </el-form-item>
          <el-form-item
            label="邮箱"
            style="width: 350px; margin-left: 30px"
            prop="email"
          >
            <el-input
              v-model="queryData.email"
              autocomplete="off"
              size="small"
              placeholder="请输入"
              :clearable="true"
            />
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryData.phone"
              placeholder="请输入"
              style="width: 350px"
              size="small"
              :clearable="true"
            />
          </el-form-item>
          <el-form-item
            label="角色"
            style="width: 350px; margin-left: 30px"
            prop="roles"
          >
            <el-select
              v-model="queryData.roles"
              autocomplete="off"
              size="small"
              placeholder="请输入"
              style="width: 350px"
              multiple
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-form-item label="启用状态">
            <el-radio v-model="queryData.status" :label="0">禁用</el-radio>
            <el-radio v-model="queryData.status" :label="1">启用</el-radio>
          </el-form-item>
          <el-form-item label="头像" style="width: 350px; margin-right: 25px">
            <image-upload ref="imgUploadCP" />
          </el-form-item>
        </el-row>
      </el-form>
      <el-divider />
      <div class="demo-drawer__footer">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button type="primary" size="small" @click="addUser">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { getRoleListApi } from '@/api/auth/role'
import { addUserApi, getUserDetailApi, editUserApi } from '@/api/auth/user'
export default {
  name: 'UserDialog',
  data() {
    return {
      drawer: false,
      list: [],
      // 请求参数
      queryData: {
        status: 1,
        avatar: '',
        email: '',
        nickname: '',
        password: '',
        phone: '',
        roles: [],
        username: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        roles: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      // 角色列表
      roleList: []
      // dataArr: []
    }
  },
  computed: {
    // passwordShow() {
    //   return this.queryData.id ? '留空表示不修改' : '请输入密码'
    // },
    passwordRules() {
      return this.queryData.id ? '' : 'password'
    }
  },
  methods: {
    handleClose() {
      this.drawer = false
      this.queryData = {
        status: 1,
        avatar: '',
        email: '',
        nickname: '',
        password: '',
        phone: '',
        roles: [],
        username: ''
      }
      this.$refs.form.resetFields()
    },
    // 获取角色列表
    async getRoleList() {
      this.drawer = true
      const { data: res } = await getRoleListApi()
      this.roleList = res
    },
    // 添加用户
    async addUser() {
      const avatar = this.$refs.imgUploadCP.fileList[0].realtiveUrl
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return this.$message.error('检验不通过')
      }
      // 判断是否有id，有就是修改没有就是新增
      if (this.queryData.id) {
        await editUserApi({ ...this.queryData, avatar })
        this.$message.success('修改成功')
      } else {
        await addUserApi({ ...this.queryData, avatar })
        this.$message.success('添加成功')
      }
      this.handleClose()
      this.$emit('updata')
    },
    // 用户信息详情回显
    async getUserDetail(id) {
      this.getRoleList()

      this.drawer = true
      const { data: res } = await getUserDetailApi(id)
      this.queryData = res
      this.$refs.imgUploadCP.fileList = [
        {
          url: 'http://124.223.14.236:8881' + res.avatar,
          realtiveUrl: res.avatar
        }
      ]
      // 重新获取用户角色信息
      this.queryData.password = '留空表示不修改'
      // 将返回数据切割成数组
      this.queryData.roles = res.roles.split(',')

      // this.queryData.roles 返回的是一个字符串数组 需要转换成数组数字
      this.queryData.roles = this.queryData.roles.map(item => +item)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-tag.el-tag--info .el-tag__close {
    color: #909399;
    margin-left: 340px;
    margin-top: 5px;
  }
}
.quillEditor {
  line-height: normal;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 550px;
  overflow: scroll;
  overflow-x: hidden;
}
::v-deep .ql-container {
  height: 100px;
}
.demo-drawer__footer {
  float: right;
  margin-right: 30px;
  margin-top: 20px;
}
.el-divider {
  margin: 0;
}

// ::v-deep .el-tooltip {
//   position: absolute;
//   top: 178px;
//   left: 80px;
// }
</style>
